<!DOCTYPE html>
<html>
	<head>
		<title>主页</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
		<style type="text/css">
			* {padding: 0;margin: 0;}
			body {background-color: #EEE;font-size: 14px;}
			.app {
				font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
			}
			.content-box {margin: 1em;padding: 1em;background-color: #FFF;color: #666;}
			.el-tag{border-radius: 1px;}
			/*800之下*/
			@media(max-width: 800px) {
				.kapian {
					width: 100% !important;
					margin-right: 0px !important;
				}
				.saoma {
					display: none;
				}
			}
			/* markdown格式 */
			.md-contetn{padding-left: 1.5em; line-height: 26px;}
			/* 多个ul时，切换那个啥 */
			.md-contetn h4{margin-left: -0.5em;}
			.md-contetn ul,.md-contetn ol{padding-left: 1em;}
		</style>
	</head>
	<body>
		<div class="app">
			<div class="content-box">
				<div style="padding: 1em; border-left: 5px #2D8CF0 solid; background-color: #EEE;">
					<big><big>Welcome to SA-后台模板 </big></big>
					<span style="display: inline-block; margin-left: 1em; color: #888;"> —— 一个基于iframe的多窗口后台模板</span>
				</div>
			</div>
			<div class="content-box">
				<div class="saoma" style="width: 20%; float: left; margin-right: 4%;">
					<el-divider content-position="left">
						<big><big>扫码加入QQ群交流</big></big>
					</el-divider>
					<div style="text-align: left;">
						<img src="http://dev33-yxzj.oss-cn-beijing.aliyuncs.com/dyc/img/2020/01/17/157924554064970545739.png" style="width: 60%; margin-left: 10%;">
					</div>
				</div>
				<div class="kapian" style="width: 35%; float: left; margin-right: 4%;">
					<el-divider content-position="left">
						<big><big>SA-ADMIN</big></big>
					</el-divider>
					<div>
						<p>
							虽然已经用过不少优秀的后台模板，但是一直都感觉不尽完美，于是在经过激烈的思想斗争后，我决定牺牲五一假期，亲自做一个尝试一下，
							一来正好给以后自己的项目中使用，二来也算是为开源界做一点自己的贡献吧
						</p>
						<br>
						<ul style="padding-left: 1em; line-height: 1.5em;">
							<li>
								<b>QQ群：</b>
								<el-link type="primary" href="https://jq.qq.com/?_wv=1027&k=5DHN5Ib" target="_blank">782974737 点击加入</el-link>
							</li>
							<li>
								<b>码云地址：</b>
								<el-link type="primary" href="https://gitee.com/sz6/sa-admin" target="_blank">https://gitee.com/sz6/sa-admin</el-link>
							</li>
							<li>
								<b>GitHub地址：</b>
								<el-link type="primary" href="https://github.com/click33/sa-admin" target="_blank">https://github.com/click33/sa-admin</el-link>
							</li>
							<li>
								<b>开源不易，求鼓励，给个star吧</b>
							</li>
						</ul>
					</div>

				</div>
				<div class="kapian" style="width: 35%; float: left;">
					<el-divider content-position="left">
						<big><big>技术选型</big></big>
					</el-divider>
					<ul style="padding-left: 1em; line-height: 1.5em;">
						<li><el-link type="primary" href="https://cn.vuejs.org/" target="_blank">JS引擎：Vue @2.6.10</el-link></li>
						<li><el-link type="primary" href="https://element.eleme.cn/#/zh-CN" target="_blank">UI框架：Element-UI @2.13.0</el-link></li>
						<li><el-link type="primary" href="http://layer.layui.com/" target="_blank">web弹层：layer @3.1.1</el-link></li>
						<li><el-link type="primary" href="https://www.swiper.com.cn/" target="_blank">切页动画：Swiper @4.5.0</el-link></li>
						<li><el-link type="primary" href="https://echarts.baidu.com/" target="_blank">图表引擎：ECharts @4.2.1</el-link></li>
						<li><el-link type="primary" href="http://www.wangeditor.com/" target="_blank">富文本编辑器：wangEditor @3.1.1</el-link></li>
						<li><el-link @click="meile">没了：占空</el-link></li>
						<li>以上几个框架即使你都没接触过，只要你阅读以下文档，也可以快速上手</li>
					</ul>
				</div>
				<div style="clear: both;"></div>
			</div>

			<!-- 功能介绍 -->
			<div class="content-box">
				<el-divider content-position="left">
					<big><big>功能介绍</big></big>
				</el-divider>
				<div class="kapian">
					<div class="md-contetn">
- 架构：基于iframe，无后台代码，纯html模板，可方便的适配任何后端语言
- 菜单：支持一、二、三级菜单，并开放一系列接口方便的使用js操作菜单
- 主题：目前保留五种主题：蓝色、绿色、白色、灰色、灰色-展开、pro钛合金、沉淀式黑蓝（切换主题时，可自动保存你的喜好，下次打开时仍然有效）
- 折叠：折叠或收缩菜单，并且监听窗口大小变化，在拉伸窗口时自动折叠或收缩菜单，自动响应式
- tabbar栏：
	- 卡片堆积：多卡片自动堆积，与菜单双向关联，切换tab卡时自动显示左侧菜单
	- 拖动手势：tab卡支持拖拽手势，上拖新窗口打开、下拽悬浮打开、左拽快速关闭
	- 右键菜单：在tab上右击，可以：刷新、复制、关闭、关闭其它、关闭所有、悬浮打开、新窗口打开、取消
	- 双击菜单：双击tabbar空白处，可以显示添加新tab窗口
	- 切换动画：集成swiper，滑动、淡入、方块、3D流、3D翻转，五种高大上切换动画，任你选择！
	- 开放接口：开放一系列api，助你方便的使用js操作tabbar栏，具体请查看集成文档
- 保留： 切换卡片时，可自动保留上个卡片的滚动条高度（目前没有见到其它任何一个模板做到这一点，或者说没有任何一个模板注意到这个细节功能点）
- 锚链：tab切换自动更改hash锚链，同时监听锚链改变tab，可灵活的用鼠标前后键切换tab窗口 （如不需要此功能可在初始化时关闭）
- 窗口：可在初始化时，设置是否显示tabbar栏，来控制它是多窗口还是单窗口，具体见使用文档
- 更新：功能不断更新中... 你有好的想法也可以告诉我，加群一起交流吧
- 文档：使用说明，见文档
					</div>
					<li style="margin-left: 1.5em;">
						窗口模式测试：
						<a href="javascript:top.sa_admin.is_show_tabbar = true;">多窗口模式</a>
						<a href="javascript:top.sa_admin.is_show_tabbar = false;">单窗口模式</a>
					</li>
				</div>
				<br>
			</div>
			
			<!-- 疑问 -->
			<div class="content-box">
				<el-divider content-position="left">
					<big><big>疑问</big></big>
				</el-divider>
				<div class="kapian">
					<div class="md-contetn">
#### vue、element-ui、layer我都没用过，可以用这个模板吗
- 首先你要明白，模板分为两部分（index.html框架与框架内的模板页）
- 如果你只使用index.html框架部分，可以不必掌握vue等技术，使用时甚至你都不用改动源码， 只重写几个属性函数就可以集成到你的项目中，
- 如果你要使用框架内的模板页，则需要对vue等框架有一定的了解
	
#### 为什么是iframe，而不是SPA 
- 现在前端开发比较主流的三种方式：服务器渲染、前后端分离、SPA
	+ 服务器渲染：类似于jsp、asp、php等所有借助后端语言渲染视图的技术，这也是比较传统的一种方式
	+ 前后端分离：脱离后端语言，只写html，就像是在写一个静态站，与服务器的交互全部走ajax
	+ SPA：在前后端分离的基础上更进一步，借助gulp、webpack等构件工具将项目打包成单页应用的一种方式

**本模板** 正是采用的第2种方式（so：本模板可能无法满足重度SPA患者）
1. 前后端分离，让我们脱离了后端语言的@include指令，不用为了代码的模块化再到处搜索xx技术如何热更新代码
2. 不使用webpack、gulp等构建工具也可以写代码，不必再费尽心机搭建一个代码编译环境
3. 网站头部底部等公共部分代码的复用是我们使用构建工具的主要目的，但是我们借助iframe标签，轻松巧妙的化解了这个难题，借助iframe， 让网站成为一个真正意义上的多窗口应用 （大多数服务器渲染方式每次切换窗口会造成窗口刷新，SPA将代码都塞到了一个页面中的方式使得我们写代码时变得瞻前顾后）
4. 返璞归真，像写静态站一样来写后台，一个html编辑器就可以强Lu所有代码，尝试一下，相信我，你会爱上这种开发模式的
					</div>
					<br>
				</div>
			</div>
			
			<!-- 更新日志 -->
			<div class="content-box">
				<el-divider content-position="left">
					<big><big>更新日志</big></big>
				</el-divider>
				<div class="kapian">
					<ul style="padding-left: 2em; padding-top: 1em; line-height: 1.5em;">
						
						<!-- ====================== 一个版本 ===================== -->
						<li>
							<b> <el-tag size="mini">版本 v2.2.0</el-tag></b>
							&nbsp;&nbsp;2020-1-20  
						</li>
						<li>集成：集成鉴权功能，详细请查看文档 </li>
						<li>新增：新增大量模板示例，可帮助你快速增删改查 </li>
						<li>修复：在边缘处右键菜单文字变形的bug </li>
						<li>重构：改了一下首页样式 </li>
						<li>优化：将element-ui版本更换至了 2.13.0 </li>
						<div><br></div>
						
						<!-- ====================== 一个版本 ===================== -->
						<li>
							<b> <el-tag size="mini">版本 v2.1.2</el-tag></b>
							&nbsp;&nbsp;2020-1-18   
						</li>
						<li>修复：修复登录页鼠标不能与背景粒子交互的bug </li>
						<li>优化：右键关闭其它和关闭全部时，首先滑到做左边，动画更直观 </li>
						<div><br></div>
						
						<!-- ====================== 一个版本 ===================== -->
						<li>
							<b> <el-tag size="mini">版本 v2.1.0</el-tag></b>
							&nbsp;&nbsp;2020-1-17
						</li>
						<li>新增：更换了登录页</li>
						<li>新增：右键菜单新增复制按钮，可直接复制一个tab在新窗口打开 </li>
						<li>新增：右键菜单新增折叠关闭动画，失去焦点时和点击取消时，菜单以折叠动画的方式关闭 </li>
						<li>新增：右键菜单新增盒子阴影，更有立体感</li>
						<li>新增：新增主题：pro钛合金、沉淀式黑蓝 </li>
						<li>修复：切换tab时，不能自动滑动的bug</li>
						<li>重构：重新设置了UI样式，详细参考模板示例</li>
						<li>注意：表格内操作按钮类样式 .c-button 换成了 .c-btn  </li>
						<li>重构：修改了sa.js，取消$util对象，所有有关$util的函数全部移到sa对象上，</li>
						<li>注意：原调用方式sa.$util.getUrlArgs('id') 现改为：sa.p('id')</li>
						<div><br></div>
						
						<!-- ====================== 一个版本 ===================== -->
						<li>
							<b> <el-tag size="mini">版本 v2.0.2</el-tag></b>
							&nbsp;&nbsp;2020-1-15
						</li>
						<li>修复bug：tab卡文字向上偏移了1px的问题</li>
						<div><br></div>
						
						<!-- ====================== 一个版本 ===================== -->
						<li>
							<b> <el-tag size="mini">版本 v2.0.1</el-tag></b>
							&nbsp;&nbsp;2020-1-14
						</li>
						<li>修复bug：在方块、3D流、3D翻转切换效果下，tab切换错乱的bug</li>
						<li>修复bug：iframe的url发生改变后，刷新按钮刷新为旧地址的bug</li>
						<div><br></div>
						
						<!-- ====================== 一个版本 ===================== -->
						<li>
							<b> <el-tag size="mini">版本 v2.0.0</el-tag></b>
							&nbsp;&nbsp;2020-1-13
						</li>
						<li>新增：卡片右击菜单弹出动画 </li>
						<li>新增：tab右键菜单动画</li>
						<li>新增：新增tab关闭动画, 在关闭tab、右键关闭其它、关闭全部时有了更流畅的体验</li>
						<li>新增：tab选项卡拖拽效果，上拽新窗口打开，下拽悬浮打开，左拽关闭，在tab处拖拽一下体验一下吧</li>
						<li>新增：在tab栏空白处，双击：可以打开添加新tab操作弹窗 </li>
						<li>新增：增加单窗口与多窗口切换功能（在初始化模板时，增加is_show_tabbar配置项）</li>
						<li>新增：增加记住上一次最后打开的窗口功能，刷新也可以记住窗口（在初始化模板时，增加is_reme_open配置项）</li>
						<li>新增: hash链接跳转功能，可灵活的用鼠标前后键切换tab窗口 </li>
						<li>新增：便签功能，可以方便的保存一些临时数据 </li>
						<li>修复bug：首页114行有个重复的class</li>
						<li>修复bug：版本号打印不对 </li>
						<li>修复bug：首页homePage的url配置无效</li>
						<li>
							因为项目紧迫，这个版本拖了三个月，积攒了不少更新点，也算是憋了一个大招，
							大家有什么意见或者想要添加功能，可以加入qq群尽情提出来，我只要有时间，一定第一时间更新
						</li>
						<div><br></div>
						
						<li>
							<b> <el-tag size="mini">版本 v1.1.4</el-tag></b>
							&nbsp;&nbsp;2019-10-17
						</li>
						<li>重写了一下简介</li>
						<li>优化主题样式</li>
						<div><br></div>
						
						<li>
							<b> <el-tag size="mini">版本 v1.1.3</el-tag></b>
							&nbsp;&nbsp;2019-9-3
						</li>
						<li>更改初始化方式</li>
						<li>优化UI样式</li>
						<li>增加新主题：灰色-展开</li>
						<div><br></div>
						
						<li>
							<b> <el-tag size="mini">版本 v1.1.2</el-tag></b>
							&nbsp;&nbsp;2019-7-16  
						</li>
						<li>增加右键菜单的失去焦点事件，失去焦点自动消失</li>
						<div><br></div>
						
						<li>
							<b> <el-tag size="mini">版本 v1.1.1</el-tag></b>
							&nbsp;&nbsp;2019-6-26 
						</li>
						<li>优化卡片切换动画，更流畅了，并且添加loading图标，视觉上更加顺畅</li>
						<li>新增悬浮窗口功能，在卡片标题处右击试试吧</li>
						<li>更换登录模板页，更漂亮了</li>
						<div><br></div>
						
						<li>
							<b> <el-tag size="mini">版本 v1.1.0</el-tag></b>
							&nbsp;&nbsp;2019-6-24 
						</li>
						<li>修复bug：鼠标悬浮tab-title时，偶尔动画混乱的bug</li>
						<li>修复bug：优化折叠动画，更流畅了</li>
						<li>集成swiper，窗口切换，更加高大上了</li>
						<div><br></div>
						
						<li>
							<b> <el-tag size="mini">版本 v1.0.8</el-tag></b>
							&nbsp;&nbsp;2019-5-28
						</li>
						<li>修复bug：菜单折叠时，菜单项箭头仍然显示的问题</li>
						<li>修复bug：在手机端菜单折叠时，右侧信息排版发生混乱的问题</li>
						<li>调整了一下字体大小，看着更顺眼了</li>
						<div><br></div>
						
						<li>
							<b> <el-tag size="mini">版本 v1.0.7</el-tag></b>
							&nbsp;&nbsp;2019-5-25
						</li>
						<li>优化一些动画效果</li>
						<li>增加模板页：轮播图管理</li>
						<li>一些样式优化</li>
						<div><br></div>
						
						<li>
							<b> <el-tag size="mini">版本 v1.0.6</el-tag></b>
							&nbsp;&nbsp;2019-5-22
						</li>
						<li>添加了菜单预览模板(tree树)</li>
						<li>修复bug：菜单分配权限时，父子级不关联的问题</li>
						<li>一些样式优化</li>
						<div><br></div>
						
						<li>
							<b> <el-tag size="mini">版本 v1.0.5</el-tag></b>
							&nbsp;&nbsp;2019-5-18
						</li>
						<li>添加了权限中心模板(tree权限树)</li>
						<li>优化用户列表模板，弹出式的修改</li>
						<li>一些其它样式优化</li>
						<div><br></div>
						
						<li>
							<b> <el-tag size="mini">版本 v1.0.4</el-tag></b>
							&nbsp;&nbsp;2019-5-15
						</li>
						<li>优化折叠动画，避免文字闪动现象</li>
						<li>sp.setMenuList();接口增加show_list参数，可灵活控制部分菜单的显示与隐藏</li>
						<li>一些样式优化</li>
						<div><br></div>
						
						<li>
							<b> <el-tag size="mini">版本 v1.0.2</el-tag></b>
							&nbsp;&nbsp;2019-5-14
						</li>
						<li>添加文章管理模板(wangEditor富文本编辑器)</li>
						<li>改写了表格里按钮的样式，更鲜艳，增加点击感</li>
						<li>菜单列表里可以指定is_show=false，使菜单成为隐藏菜单</li>
						<li>
							重写了一些接口，可以更加方便的与你的系统集成  
						</li>
						<div><br></div>
						
						<li>
							<b> <el-tag size="mini">版本 v1.0.1</el-tag></b>
							&nbsp;&nbsp;2019-5-5
						</li>
						<li>
							修复周日显示周0的bug
						</li>
						<li>
							主题更换时高亮显示，方便区分
						</li>
						<li>增加三级菜单支持</li>
						<div><br></div>
						
						<li>
							<b><el-tag size="mini">版本 v1.0.0</el-tag></b>
							&nbsp;&nbsp;2019-5-2
						</li>
						<li>第一个版本出炉</li>
						<li>功能持续更新中...</li>
					</ul>
				</div>
			</div>
			
			<br><br>

		</div>


		<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
		<script type="text/javascript">Vue.config.productionTip = false;</script>
		<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
		<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '.app',
				data: {
					
				},
				methods: {
					// 没了
					meile: function() {
						this.$message({
							message: '没了还点',
							type: 'warning'
						});
					},
					// 显示文档页面
					openDoc: function() {
						parent.sp.selectMenu(11);
					}

				}
			})
			
			// 
			$('.md-contetn').each(function() {
				var html = marked($(this).html());
				$(this).html(html);
			})
			
		</script>
	</body>
</html>
